<template>
    <van-empty :image="image" :image-size="size">
        <p class="empty-tip" v-if="tip">{{tip}}</p>
        <p class="empty-tip small" v-if="addTip">{{addTip}}</p>
    </van-empty>
</template>

<script setup>
import { toRefs } from 'vue';
const props = defineProps({
    image: {
        type: String,
        default: 'https://img.yzcdn.cn/vant/custom-empty-image.png'
    },
    tip: {
        type: String,
        default: ''
    },
    addTip: {
        type: String,
        default: ''
    },
    size: {
        default: 260,
        type: [Number, Array]
    }
})
const { image, tip, addTip} = toRefs(props);
</script>


<style lang="scss" scoped>
.empty-tip{
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #171A1D;
    line-height: 24px;
    text-align: center;

    &.small{
        margin-top: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #A2A3A4;
        line-height: 22px;
    }
}
</style>
